<template>
  <div class="main">
    <div class="mainTitle">
      <h2>栏目管理</h2>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add"
          >新增</el-button
        >
      </div>
    </div>
    <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    :default-expand-all="false"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :header-cell-style="tableHeaderColor">
    <el-table-column type="index" align="center" width="80px" label="序号"></el-table-column>
    <el-table-column
        v-for="item in tableDataColumn"
        :key="item.key"
        :prop="item.key"
        :label="item.label"
      >
      <template slot-scope="scoped">
        {{scoped.row[item.key]}}
      </template>
      </el-table-column>
      <el-table-column label="操作" width="300px" align="center">
        <template slot-scope="scoped">
          <el-button type="text" @click="edit(scoped.row)">编辑</el-button>
          <el-button type="text" @click="deleteRow(scoped.row)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <Form :formobj="formobj" :formdata="formData" ref="columnForm" :formrules="formrules"></Form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { columnAdd,columnEdit, columnqueryAll, columndelete } from "@/api/webpage";
import Form from "@/components/form.vue";
import TableList from "@/components/TableList.vue";
export default {
  name: "Columnmanagement",
  components: {
    TableList,
    Form,
  },
  data() {
    return {
      title: "",
      dialogVisible: false,
      tableData: [],
      tableDataColumn: [
        { label: "栏目名称", key: "name" },
        { label: "排序", key: "no" },
        // { label: "编码", key: "code" },
        // { label: "所属栏目", key: "parentId" },
        { label: "Id", key: "id" },
        // { label: "自定义字段", key: "type" },
        // { label: "图片", key: "icon" },
      ],
      params: {
        total: 100,
        page: 1,
        pagesize: 10,
      },
      formData: {
        id:'',
        code:'',
        name:'',
        no:'',
        // type:'',
        icon:'',
        path:'' ,
        showQuery:''
      },
      formobj: [
        { label: "编码", key: "code", type: "input" },
        { label: "名称", key: "name", type: "input" },
        { label: "所属栏目", key: "parentId", type: "select", options:[] },
        { label: "排序", key: "no", type: "input" },
        { label: "分组", key: "icon", type: "input" },
        { label: "路由", key: "path", type: "input" },
        { label: "是否可查", key: "showQuery", type: "radio",options:[
          { label:"是" ,value:'1'},
          { label:"否" ,value:'0'}
        ] },
        // { label: "图片", key: "icon", type: "input" },
      ],
      formrules: {
        code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        parentId: [{ required: false, message: "所属栏目", trigger: "blur" }],
        no: [{ required: false, message: "请输入排序", trigger: "blur" }],
        type: [{ required: false, message: "自定义字段", trigger: "blur" }],
        icon: [{ required: false, message: "请上传图标", trigger: "blur" }],
        showQuery:[{ required: true, message: "请选择", trigger: "change" }],
      },
      type:''
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getlist()
    },
    transTree(list, rootValue) {
      const treeData = []
      list.forEach(item => {
        if(item.code != '000'){
          if (item.parentId === rootValue) {
            const children = this.transTree(list, item.id)
            if (children.length) {
              item.children = children
            }
            treeData.push(item)
          }
        }
        
      })

      return treeData
    },
    getlist() {
      let data = {
        name: "",
        code: "",
        parentId: "",
      };
      columnqueryAll(data).then((res) => {
        if (res.code == 0) {
          this.tableData = this.transTree(res.data,null)
          this.formobj[2].options = res.data.map(item=>{
            return { label:item.name , value:item.id}
          })
        }
      });
    },
    deleteRow(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          ids.push(row.id);
          columndelete(ids)
            .then((res) => {
              if (res.data == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getlist();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    handleCurrentChange(val) {
      this.params.page = val;
    },
    add() {
      this.type ='add'
      this.title = "新增";
      this.dialogVisible = true;
    },
    edit(row){
      console.log("🚀 ~ file: index.vue ~ line 142 ~ edit ~ row", row)
      this.type= 'edit'
      this.formData = row
      this.title = "新增";
      this.dialogVisible = true;
    },
    addcontent(row){
      this.$router.push({
        name: 'addform',
        query: { type:'add', cid: row.id }
      })
    },
    chakancontent(row){
      this.$router.push({
        name: 'articlelist',
        query: { cid: row.id }
      })
    },
    submit() {
      this.$refs.columnForm.getData().then((res) => {
        if(this.type =='add'){
          columnAdd(res).then((res) => {
            if (res.code == 0) {
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.getlist();
            } else {
              this.$message.error(res.message);
            }
          });
        }else{
          columnEdit(res).then((res) => {
            if (res.code == 0) {
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.getlist();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        
      });
    },
    cancel() {
      this.dialogVisible = false
      this.formData={
        id:'',
        code:'',
        name:'',
        no:'',
        // type:'',
        // icon:'',
        path:'' ,
        showQuery:''
      },
      this.$refs.columnForm.resetForm();
      this.$refs.columnForm.clearValidate();
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color:#F6F5FB; font-size:15px'
      }
    },
  },
};
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>

